<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="01-da.css">
</head>
<body>
    <header>
        <!-- 放大镜 -->
        <div class="left">
            <div class="image">
                <img src="../img/jisoo.jpg" alt="">
                <span></span>
            </div>
            <ul>
                <li class="action"><img src="../img/jisoo.jpg" alt=""></li>
                <li><img src="../img/jennie.jpeg" alt=""></li>
                <li><img src="../img/rose.jpg" alt=""></li>
                <li><img src="../img/lalisa.jpg" alt=""></li>
            </ul>
            <div class="back"></div>
        </div>
    </header>
    <script>
        // 1 当鼠标移入.image标签 设置.image>span 同时.back 显示
        // 2 当鼠标移出.image标签 设置.image>span 同时.back 隐藏
        // 3 当鼠标在.image标签中进行移动时,设置span标签跟着鼠标进行移动; 
        //   不能超出.image范围,设置.back的等比例背景图移动
        // 4 当鼠标移入li标签 设置当前li带有边框,其余li不要
        //   同时更改.image中img与.back的背景图的图都为当前li中img的路径

        // 1. 获取标签对象
        var divimg = document.querySelector('.image');
        var span = document.querySelector('.image>span');
        var back = document.querySelector('.back');
        var lis = document.querySelectorAll('header li');

        // 10.设置li循环，切换图片
        for (var i = 0 ; i < lis.length; i++) {
            lis[i].onmouseenter = function ( ) {
                divimg.children[0].src = this.children[0].src;
                back.style.backgroundImage = `url(${this.children[0].src})`;
                // li 边框颜色
                for (var k = 0; k < array.length; k++) {
                    lis[k].style.borderColor = 'transparent';
                }
                this.style.borderColor = 'rgb(255, 192, 203);'
            }
            
        }
        // 4.设置移动效果
        divimg.onmousemove = function (e) {
            // console.log(e.offsetX);  //获取鼠标到当前div的距离
            // console.log(e.offsetY);

            // 5. 鼠标到当前div的距离 = 鼠标到浏览器视图窗口的距离 - divimg标签到浏览器视图窗口的距离 - 返回span的像素一般宽度
            var t = e.clientY - divimg.getBoundingClientRect().y - span.offsetHeight / 2;
            var l = e.clientX - divimg.getBoundingClientRect().x - span.offsetWidth / 2;
            // 6.计算鼠标可移动的最大值
            var maxl = divimg.offsetWidth - span.offsetWidth;
            var maxt = divimg.offsetHeight - span.offsetHeight;
            // 7.限制鼠标可移动最大值、最小值
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > maxl) l = maxl;
            if(t > maxt) t = maxt;
            // 8.设置span的移动 但是移动范围由鼠标的位置确定
            span.style.top = t + "px";
            span.style.left = l + "px";
            // 9. l : maxl == bl : 400 //其中400是背景图移动的最大值
            var bl = 300 / maxl * l;
            var bt = 400 / maxt * t;
            back.style.backgroundPositionX =-bl + "px";
            back.style.backgroundPositionY =-bt + "px";
        }
        // 2. 鼠标移入,出现效果
        divimg.onmouseenter = function () {
            span.style.display = 'block';
            back.style.display = 'block';
        }
        // 3. 鼠标移出
        divimg.onmouseleave = function () {
            span.style.display = 'none';
            back.style.display = 'none';
        }
    </script>
</body>
</html>